<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-card layui-backbox">
				<div class="layui-card-header" id="h1titleid">线下课程</div>
				<div class="layui-card-body" style="display: flex;">
					<form class="layui-form gform" action="/" lay-filter="xxcoursefilter">
						<input type="hidden" name="tbId">
						<input type="hidden" name="type"  />
						<div class="layui-form-item">
							<label class="layui-form-label">课程标题</label>
							<div class="layui-input-inline">
								<input type="text" name="tbTitle" placeholder="请输入线下课程标题" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">课程类型</label>
							<div class="layui-input-inline">
								<div class="bqs " id="bqid">

								</div>
							</div>
						</div>
						<!-- <div class="layui-form-item">
							<label class="layui-form-label">课程期数</label>
							<div class="layui-input-inline">
								<input type="text" name="number" placeholder="请输入课程期数" autocomplete="off" class="layui-input">
							</div>
						</div> -->

						<div class="layui-form-item">
							<label class="layui-form-label">课程期数</label>
							<div class="layui-input-inline">
								<select name="number" id="qsid" placeholder="请选择期数">
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程封面 </label>
							<div class="layui-input-inline">
								<input type="hidden" name="imagePath" id="photoimg" />
								<div class="layui-upload-drag" id="upfile">
									<i class="layui-icon"></i>
									<p>点击上传图片，或将文件拖拽到此处</p>
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">开课时间 </label>
							<div class="layui-input-inline">
								<input type="text" name="tbTime" id="xxkksj" placeholder="请选择开课时间" autocomplete="off" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">选择讲师</label>
							<div class="layui-input-inline">
								<select name="userId" id="jstype" lay-filter="xxuserIdfilter" lay-search>
									<option value=""></option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程价格(RMB)</label>
							<div class="layui-input-inline">
								<input type="text" name="price" placeholder="请输入课程价格" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">课程地址</label>
							<div class="layui-input-inline">
								<input type="text" name="tbAdress" id="searchmap" placeholder="请输入课程地址" autocomplete="off" class="layui-input">
								<div id="mapcont" style="height: 300px;">

								</div>
							</div>
						</div>



						<div class="layui-form-item">
							<label class="layui-form-label">课程详情</label>
							<div class="layui-input-inline">
								<textarea id="xxxq" name="tbContent" style="display: none;"></textarea>
							</div>
						</div>
						<!-- 		<div class="layui-form-item">
							<label class="layui-form-label">已结束</label>
							<div class="layui-input-inline">
								<textarea id="xxxq1" name="tbContent" style="display: none;"></textarea>
							</div>
						</div> -->

						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								<div class="layui-btn layui-btn-primary" id="returnqx">取消</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 脚本 -->

<script>
	layui.use(['form', 'layedit', 'upload', 'laytpl', 'laydate'], function() {
		var form = layui.form,
			$ = layui.jquery,
			upload = layui.upload,
			laytpl = layui.laytpl,
			layedit = layui.layedit,
			laydate = layui.laydate;
		form.render();

		layedit.set({
			uploadImage: {
				url: FileUp + '?fileType=24', //接口url
					
				type: 'post' //默认post
			},
			height: 600
		});
		var richdemo = layedit.build('xxxq'); // richdemo1 = layedit.build('xxxq1');
		var router = layui.router(); //获取路由
		var title = router.search.type == 1 ? '线下公益' : '小班课程';
		$("#h1titleid").html(title)
		laydate.render({
			elem: '#xxkksj', //指定元素
			value: new Date(),
			min: 0
		});
		// 地图
		// 百度地图API功能
		var map = new BMap.Map("mapcont");
		map.centerAndZoom(new BMap.Point(114.122603, 22.55059), 18);
		var local = new BMap.LocalSearch(map, {
			renderOptions: {
				map: map
			}
		});

		$('#searchmap').bind('input propertychange', function() {
			local.search($('#searchmap').val());
		});

		upload.render({
			elem: '#upfile',
			url: FileUp,
			acceptMime: 'image/*',
			size: '800',
			accept: 'images',
			data: {
				fileType: 8
			},
			headers: {
				"ticket": JSON.parse(localStorage.getItem('HH_T')).ticket
			},
			done: function(res) {
				console.log(res)
				if (res.status == 200) {
					$("#photoimg").val(res.data.filePath);
					$("#upfile").html('	<img src="' + IMG_URL + res.data.filePath + '" >');
					layer.msg("上传成功", {
						"icon": 1
					});
				}
			},
			error: function() {
				//请求异常回调
			}
		});

		///获取课程类型
		videotypelist = []
		POSTAJAX(VtypeGet, {
			currentPage: 1,
			pageSize: 1000,
			tbName: ''
		}, function(res) {

			$.each(res.data.data, function(idx, obj) {
				obj.ischoose = 2;
				obj.ishave = 2;
				$("#bqid").append('<div class="bq bq2 cupo" id="bq' + obj.tbId + '" data.id="' + obj.tbId +
					'" onclick="videotypechoosefn(' + idx + ')">' + obj.tbProdustsTypeName +
					'</div>');
				videotypelist.push(obj)
			})

		})

		//查询类型
		POSTAJAX(VtypeGet, {
			currentPage: 1,
			pageSize: 1000,
			tbName: ''
		}, function(res) {
			$.each(res.data.data, function(idx, obj) {
				$("select[name='tbType']").append('<option value="' + obj.tbId + '">' + obj.tbProdustsTypeName +
					'</option>');
			})
			form.render();
		})

		//查询课程期数
		POSTAJAX(XXQNum, {
			tbType: router.search.type
		}, function(res) {
			$.each(res.data, function(idx, obj) {
				$("select[name='number']").append('	<option value="' + obj + '">' + obj + '</option>');
			})
			form.render();
		})

		//查询

		POSTAJAX(LecturerGet, {
			currentPage: 1,
			pageSize: 1000,
			tbName: ''
		}, function(res) {
			$.each(res.data.data, function(idx, obj) {
				$("select[name='userId']").append('<option value="' + obj.tbId + '">' + obj.realName +
					'</option>');
			})
			form.render();
		})

		if (router.search.tbId) {
			// 有id的传参的值  查询 id
			POSTAJAX(XXById2, {
				tbId: router.search.tbId
			}, function(res) {
				setTimeout(function() {
					if(res.data.tbTime != null ){
						res.data.tbTime = res.data.tbTime.substring(0,10)
					}
					form.val("xxcoursefilter", {
						"tbId": res.data.tbId,
						"tbTitle": res.data.tbTitle,
						"tbType": res.data.tbProdustsTypeId,
						"tbAdress": res.data.tbAdress,
						"tbTime": res.data.tbTime,
						"type":router.search.type,
						// "number": res.data.tbNumber,
						"imagePath": res.data.tbCover,
						// "userId": res.data.tbLecturerId,
						// "tbContent": res.data.tbContent,
						// "tbContent": res.data.tbContent
					})
				
					
					// $("select[name='number']").val(res.data.tbNumber);
					// $("#xxxq").html(res.data.tbContent)
					layedit.setContent(richdemo, res.data.tbContent);
					
					$.each(res.data.typeNames, function(idx, obj) {
						$.each(videotypelist, function(idx1, obj1) {
							if (obj.tbId == obj1.tbId) {
								videotypelist[idx1].ishave = 1;
								videotypechoosefn(idx1);
								console.log(JSON.stringify(videotypelist))
							}
						})
					})
					
					setTimeout(function() {
						$("#jstype").find("option[value='" + res.data.tbLecturerId + "']").prop("selected", true);
						$("#qsid").find("option[value='" + res.data.tbNumber + "']").prop("selected", true);
						form.render('select');
					}, 100);
					
					$("#upfile").html('	<img src="' + IMG_URL + res.data.tbCover + '" >');
				}, 500);
			})

			//修改
			form.on('submit(formDemo)', function(data) {
				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {
					data.field.tbContent = layedit.getContent(richdemo)

					console.log(layedit.getContent(richdemo))
					var tpostjson = data.field;
					tpostjson.
					tpostjson.ids = []; //视频类型初始化
					tpostjson.dels = [];
					$.each(videotypelist, function(idx, obj) {
						if (obj.ischoose == 1) {
							//选中的
							if (obj.ishave == 1) {

							} else {
								tpostjson.ids.push(obj.tbId)
							}
						} else {
							///未选中的
							if (obj.ishave == 1) {
								tpostjson.dels.push(obj.tbId)
							} else {

							}
						}
					})

					console.log(tpostjson)
					POSTAJAX(XXMod, tpostjson, function(res) {
						if (res.status == 200) {
							layer.msg("修改成功", {
								"icon": 1
							})
							form.render();
							// location.href = '#/xxcourse/list?type=' + router.search.type
						} else {
							layer.msg("失败，请重试", {
								"icon": 2
							})
						}
					})
				}
				return false;
			});
		} else {
			// 新增
			//监听提交
			form.on('submit(formDemo)', function(data) {

				if (layedit.getContent(richdemo) == '') {
					layer.msg("请输入详情内容", {
						"icon": 7
					})
				} else {
					var tpostjson = data.field;
					tpostjson.tbContent = layedit.getContent(richdemo)
					if (tpostjson.price > 0) {
						tpostjson.type = 2;
					} else {
						tpostjson.type = 1;
					}
					tpostjson.ids = []; //视频类型初始化
					$.each(videotypelist, function(idx, obj) {
						if (obj.ischoose == 1) {
							tpostjson.ids.push(obj.tbId)
							// console.log(tpostjson)
						}
					})

					console.log(tpostjson)
					POSTAJAX(XXAdd, tpostjson, function(res) {
						if (res.status == 200) {
							layer.msg("新增成功", {
								"icon": 1
							})
							richdemo = layedit.build('demo');
							form.render();
							// location.href = '#/xxcourse/list'
						} else {
							layer.msg(res.msg, {
								"icon": 2
							})
						}
					})
				}
				return false;
			});

		}
		$("#returnqx").on("click", function() {
			location.href = '#/teacher/list';
		})


	});

	function videotypechoosefn(idx) {
		//视频类型选择函数
		// console.log(idx)
		if (videotypelist[idx].ischoose == 2) {
			videotypelist[idx].ischoose = 1;
			$(".bq").eq(idx).addClass('bqactive')
		} else {
			$(".bq").eq(idx).removeClass('bqactive')
			videotypelist[idx].ischoose = 2;
		}


	}
</script>
<!-- 样式 -->
<style scoped>




</style>
